<!--
 * @Author: your name
 * @Date: 2021-06-23 19:23:06
 * @LastEditTime: 2023-08-01 18:09:58
 * @LastEditors: pmy
 * @Description: In User Settings Edit
 * @FilePath: \bdcar-net\src\views\Page.vue
-->
<template>
  <div class="page">
    <div class="loading" v-loading="isLoad"> </div>
    <!-- 系统头部图片以及用户信息退出 -->
    <topTitleDom />
    <!-- 菜单 -->
    <MenuNav :class="isPackUp ? 'menuExpand' : 'menuCollapse'" />
    <!-- 调用的组件 -->
    <keep-alive :include="activeMenuList">
      <component :is="activeModel" class="componentStyle" :class="{ componentStyle_close: isPackUp }"></component>
    </keep-alive>
    <!-- 切换标签页 -->
    <switchTabs class="switch-tabs" :style="{ left: isPackUp ? '6.4rem' : '23rem' }"></switchTabs>
  </div>
</template>
<script>
import { TreeCreate } from "@/assets/js/createTree"
var comObj = {};
// 引入所有需要的动态组件
const requireComponent = require.context(
  "@/components/views", //组件所在目录的相对路径
  true, //是否查询其子目录
  /\w+\.vue$/ //匹配基础组件文件名的正则表达式
);
requireComponent.keys().forEach(fileName => {
  // 获取文件名
  var names = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");
  // 获取组件配置
  const componentConfig = requireComponent(fileName);
  // 若该组件是通过"export default"导出的，优先使用".default"，否则退回到使用模块的根
  comObj[names] = componentConfig.default || componentConfig;
});
const requireComponent2 = require.context(
  "@/components/theOne", //组件所在目录的相对路径
  false, //是否查询其子目录
  /\w+\.vue$/ //匹配基础组件文件名的正则表达式
);
requireComponent2.keys().forEach(fileName => {
  // 获取文件名
  var names = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");
  // 获取组件配置
  const componentConfig = requireComponent2(fileName);
  // 若该组件是通过"export default"导出的，优先使用".default"，否则退回到使用模块的根
  comObj[names] = componentConfig.default || componentConfig;
});
import { getUserInfor } from "../services/backServices"
export default {
  data() {
    return {
      user: { Message: { AliasName: "管理员" } },
      isLoad: true,
      isExpiredVisible: false,
      expiredNum: 0,
    };
  },
  components: { ...comObj },
  computed: {
    //当前响应的组件
    activeModel() {
      return this.$store.state.activeMenu;
    },
    isPackUp() {
      return this.$store.state.isPackUp;
    },
    //当前缓存的菜单栏
    activeMenuList() {
      let List = [];
      this.$store.state.activeMenuList.forEach(v => {
        List.push(v.name);
      })
      if (List.length > 0)
        this.isLoad = false;
      return List;
    },
    //当前用户信息
    currentUser() {
      return this.$store.state.currentUser;
    },
    systemTitle() {
      if (this.currentUser?.companyName)
        return this.currentUser?.companyName
      else
        return "丝宝电商数据分析平台";
    },
  },
  async created() {
    let _this = this;
    let result = await getUserInfor();
    if (result.data.code == 200) {
      // 初始化用户信息
      _this.$store.dispatch("updateCurrentUser", result.data.data.user);
      // 排序菜单
      result.data.data.views.sort((a, b) => a.orderKey - b.orderKey)
      // 初始化用户可使用的菜单栏
      let tree = new TreeCreate(result.data.data.views.map(v => {
        v.index = v.url
        return v
      }))
      let List = tree.getData().children
      _this.$store.dispatch("getAvailableMenuList", List);
      let page = List[0]
      while (page?.children.length) {
        page = page.children[0]
      }
      //默认点击的菜单栏
      _this.$store.dispatch("updateActiveMenu", page.index);
      //更新浏览器宽高
      let client = {
        height: document.documentElement.clientHeight,
        width: document.documentElement.clientWidth,
      };
      _this.$store.dispatch("updateClient", client);
      window.onresize = function () {
        //更新浏览器宽高
        let client = {
          height: document.documentElement.clientHeight,
          width: document.documentElement.clientWidth,
        };
        _this.$store.dispatch("updateClient", client);
      };
    } else {
      _this.$router.push({ path: "/" });
    }
  },
  methods: {
  },
}
</script>
<style scoped lang="less">
@meneWidth: 230px;
@shrinkwidth: 64px;

.page {
  font-size: 14px;

  .componentStyle {
    position: absolute;
    top: 60px;
    left: @meneWidth;
    width: calc(100% - @meneWidth);
    height: calc(100% - 100px);
    background: rgb(242, 243, 245);
  }

  .componentStyle_close {
    left: @shrinkwidth;
    width: calc(100% - @shrinkwidth);
  }

  .switch-tabs {
    position: absolute;
    bottom: 0;
    left: @meneWidth;
    width: calc(100% - @meneWidth);
    height: 40px;
  }

  .loading {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .menuExpand {
    background-color: #111b37;

    ::v-deep .el-submenu__title {
      text-align: center;

      img {
        position: relative;
        left: 4px;
      }
    }
  }

  .menuCollapse {
    background-color: #111b37;
  }
}
</style>